{{!-- Copyright (C) 2012-present, The Authors. This program is free software: you can redistribute it and/or  modify it under the terms of the GNU Affero General Public License, version 3, as published by the Free Software Foundation. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <http://www.gnu.org/licenses/>. --}}

{{#ifNotEmbedded}}
<div>
</div>
{{/ifNotEmbedded}}


<span id="header_root"></span>

<div
  class="
  conversationViewRoot
  clickDeselectsHull
  {{#if use_background_content_class}}
  background_content
  {{/if}}
  "
  dir={{direction}}

  style="
    max-width: 768px; {{!-- check pixel ratio? --}}
    margin: auto; {{!-- use flexbox rather than auto, or add a container for this container? --}}
    background-color: {{polis_bgcolor}};
  "> {{! PARTICIPATION VIEW DIV }}

  {{#if useBannerHeader}}
    {{> headerWhatIsPolis}}
  {{/if}}
<div
  class="clickDoesNotDeselectHull"
  style="display: none"
>
  {{view conversationTabs}}
  </div>

{{!  ------------ BEGIN TOPIC AND DESCRIPTION ---------------  }}

<div class="
  clickDeselectsHull
  "
  style="
    padding-inline-start: 0px;
    padding-inline-end: 0px
    ">
    <div class="POLIS_HEADLINE conversationViewHeadline" dir="auto">
    {{#unless useBannerHeader}}
      {{#if showLogoAndBreadCrumbInHeader}}
          <div class="HeadingA">
            <a href="pol.is">
              <img
                width="164px"
                src="https://pol.is/polis_logo_2.png"
                alt=""
                >
            </a>
            <a
              style="
                vertical-align: middle;
                font-size: 18px;"
              href="/s/{{context}}"
              >
            /s/{{context}}
            </a>
          </div>
      {{else}}
        {{#if showLogoInHeader}}
          <div class="HeadingA">
            <img
              width="164px"
              src="https://pol.is/polis_logo_2.png"
              alt=""
              >
          </div>
        {{/if}}
      {{/if}}
    {{/unless}}

    {{#if show_admin_button}}
    <div style="padding: 10px 0px 20px 0px">
{{!--       <a
        href="share{{url_name}}"
        class="Btn Btn-alt"
        style="margin-inline-end: 20px
        ">
        <i class="fa fa-link">
        </i>
        &nbsp;SHARE
      </a> --}}
      <a
        href="{{url_moderate}}"
        class="Btn Btn-alt"
        style="margin-inline-end: 20px
        ">
        ADMIN
      </a>
{{!--       {{#if is_active}}
        <a
          id="closeConversationButton"
          class="Btn Btn-alt"
          style="cursor:pointer; margin-inline-end: 20px; text-decoration: none;"

          >
          CLOSE
        </a>
      {{ else }}
        <a
          id="reopenConversationButton"
          class="Btn Btn-alt"
          style="cursor:pointer; margin-inline-end: 20px"
          >
          REOPEN
          </a>
      {{/if}}
      {{#if no_vis}}
        <a
          href="{{url_force_vis}}"
          class="Btn Btn-alt"
          style="margin-inline-end: 20px"
          >
          SEE VIS
          </a>
      {{/if}} --}}

    </div>
    {{/if}}

    {{#unless no_topic}}
    {{#ifDefined topic}}
      <h2
        class="HeadingA"
        style="
         margin-bottom: 10px;
        "
        dir="auto">
        {{topic}}
        {{#unless is_active}}
        <span class="no_you_vote" style="
         color: white;
         background-color: rgb(231, 76, 60);
         /* font-size: 0.7em; */
         /* padding: .2em; */
         font-size: 20px;
         padding: 0px 10px;
         border-radius: 3px;
         position: relative;
         top: -5px;
         left: 6px;
        ">closed</span>
      {{/unless}}
      </h2>
    {{/ifDefined}}
    {{/unless}}

    {{#unless no_description}}
    {{#ifDefined description}}
        <p
          style="
            border-inline-start: 4px solid #2980b9;
            padding-inline-start: 10px;
            font-family: chaparral-pro;
            word-wrap:break-word;
          "
          dir="auto">
          {{{description}}}
        </p>
    {{/ifDefined}}
    {{/unless}}

    {{#if link_url}}
        <p
          style="
            border-inline-start: 4px solid #2980b9;
            padding-inline-start: 10px;
            font-family: chaparral-pro;
            word-wrap:break-word;
          "
          dir="auto">
        {{linkExternal link_url link_url}}
        </p>
    {{/if}}
    </div>
  </div> {{! /fake container }}

{{!  ------------ BEGIN MAIN CONTENT ---------------  }}

{{!  ------------ HELP TEXT ---------------  }}

<div
  id="helpTextWelcome"
  style="
    {{!-- background-color: {{help_bgcolor}}; --}}
    {{!-- border: 1px solid rgb(85, 172, 238); --}}
    {{!-- color: rgb(68, 136, 189); --}}
    {{!-- color: {{help_color}}; --}}
    color: black;
    padding: 5px 0px 5px 0px;
    font-style: italic;
    font-family: chaparral-pro;
  " class="
  clickDoesNotDeselectHull
  {{#if hideHelp}} displayNone{{/if}}
  {{#if no_voting}} displayNone{{/if}} {{!-- this line is here because the help text references voting --}}
  ">
  <p
    style="margin: 0px;"
    >
    <span>
      {{!-- TODO_SECURITY try to not use triple brackets. --}}
      {{{s.participantHelpWelcomeText}}}
    </span>

  </p>
</div>

{{!  ------------ SUBMIT COMMENT FORM ---------------  }}
<span id="commentFormBSibling" style="display:none"></span>


{{!  ------------ VOTING PANEL ---------------  }}
<span class="{{#if no_voting}}displayNone{{/if}}">
  {{view readReactView}}
</span>



{{!  ------------ SUBMIT COMMENT FORM ---------------  }}
<div
  id="commentFormParent"
  class="POLIS_COMMENT_FORM {{#if no_write}}displayNone{{/if}}"
  >
  {{view commentForm}}
</div>

<span class="{{#if no_vis}}displayNone{{/if}}"> {{!-- no_vis toggle wrapper --}}

  {{#if show_pca_vis}}
    <div class="HeadingC" style="text-transform:none; cursor: default; white-space: nowrap; border-bottom: none;">
      {{!-- <img src="https://pol.is/polis-favicon_favicon.png" height="20px" id="opinion_groups_logo"> --}}
      {{s.opinionGroups}}
    </div>

    <div
      id="helpTextGroups"
      style="
        {{!-- background-color: {{help_bgcolor}}; --}}
        {{!-- border: 1px solid rgb(85, 172, 238); --}}
        {{!-- color: rgb(68, 136, 189); --}}
    {{!--    color: {{help_color}};
        padding: 15px 30px 15px 15px;
        width: 99%;
        margin: 0px auto 10px auto;
        border-radius: 4px;
        position: relative; --}}

        padding: 5px 0px 5px 0px;
        font-style: italic;
        font-family: chaparral-pro;

      " class="
        clickDoesNotDeselectHull
        {{#if hideHelp}}displayNone{{/if}}
      ">
      <p
        style="margin: 0px; margin-bottom: 10px;"
        >
        <span class="displayNone" id="vis_help_label">
          {{!-- TODO_SECURITY try to not use triple brackets. --}}
          {{{s.participantHelpGroupsText}}}
        </span>
        <span class="displayNone" id="vis_not_yet_label">
          {{!-- TODO_SECURITY try to not use triple brackets. --}}
          {{{s.participantHelpGroupsNotYetText}}}
        </span>
      </p>
      <div id="helpTextGroupsMore" style="display:none; margin-top: 10px">
        {{{s.helpWhatAreGroupsDetail}}}
      </div>
    </div>
  {{/if}}


<div id="vis_section" class="displayNone">


<div style="margin-bottom: 15px;"> {{!-- vis and carousel --}}

<div id="vis_sibling_above_tab_content"></div>

<div
  id="visualization_parent_div"
  class="clickDoesNotDeselectHull"
  style="text-align: end; visibility: hidden; background-color: rgba(0,0,0,0);"
  >
  <div
    id="visualization_div"
    style="display:none"
    class="vis_container clickDoesNotDeselectHull"
    >
  </div>

  <div id="vis2_root"></div>

  {{#if show_top_comments}}
  <div id="top_comments" style="text-align: start">
    <div class="HeadingC" style="text-transform:none; cursor: default; white-space: nowrap; border-bottom: none;">
      {{s.topComments}}
    </div>
    {{view topCommentsView}}
  </div>
  {{/if}}
  {{#if show_divisive_comments}}
  <div id="divisive_comments" style="text-align: start">
    <div class="HeadingC" style="text-transform:none; cursor: default; white-space: nowrap; border-bottom: none;">
      {{s.divisiveComments}}
    </div>
    {{view divisiveCommentsView}}
  </div>
  {{/if}}
</div>
<div
  id="groupSelectionViewContainer"
  class="clickDoesNotDeselectHull"
  style="
    display: none;
    text-align: center;
    min-height: 34px;
    margin: 0px;
    padding: 10px 0px 10px 0px;
  ">
  {{view groupSelectionView}}
</div>

</div> {{!-- end lightPanel --}}
</div> {{!-- end vis_section --}}

</span> {{!-- end no_vis toggle wrapper --}}




{{!  ------------ BEGIN FOOTER ---------------  }}
{{#unless no_footer}}

  <div style="margin-top: 40px; margin-bottom: 20px;" data-test-footer>
    <a href="https://pol.is" target="_blank" dir="auto">
      {{> logo}}
    </a>
    <div
      style="
        margin-top: 15px;
        text-align: center;
      "
      >
        {{> linkPrivacy}}
        {{> linkTos}}
        <div id="polis-donate">
          <i>Polis is powered by support from people like you. Contribute <a href="/donate">here</a>.</i>
        </div>
    </div>
  </div>

  {{!-- <div style="font-size:18px;font-weight:400;color:white;background-color:#03a9f4;display:flex;-webkit-flex-direction:row;-webkit-flex-wrap:nowrap;-webkit-justify-content:space-between;-webkit-align-items:baseline;-webkit-align-content:stretch;-webkit-order:0;-webkit-flex-grow:0;-webkit-flex-shrink:1;-webkit-flex-basis:auto;-webkit-align-self:auto;" data-reactid=".0.0.$=1$=012.0">
    <p style="margin-inline-start:20px;font-size:12px;" data-reactid=".0.0.$=1$=012.0.$=1$/=010">© The Authors. 2016 </p>
    <div style="margin-inline-end:20px;" data-reactid=".0.0.$=1$=012.0.$=1$/=011">
      <a style="text-decoration:none;cursor:pointer;color:white;font-size:12px;" href="/tos" data-reactid=".0.0.$=1$=012.0.$=1$/=011.$/=10">
        <span name="file-text-o" class="fa fa-file-text-o" data-reactid=".0.0.$=1$=012.0.$=1$/=011.$/=10.$=10"></span>
        <span style="margin-inline-start:5px;" data-reactid=".0.0.$=1$=012.0.$=1$/=011.$/=10.$/=11"> TOS </span>
      </a>
      <a style="text-decoration:none;cursor:pointer;color:white;font-size:12px;" href="/privacy" data-reactid=".0.0.$=1$=012.0.$=1$/=011.$/=11">
        <span style="margin-inline-start:5px;" data-reactid=".0.0.$=1$=012.0.$=1$/=011.$/=11.0"> PRIVACY </span>
      </a>
    </div>
  </div> --}}
{{/unless}}
  {{! END FOOTER}}
{{!  ------------ END FOOTER ---------------  }}

</div> {{! END PARTICIPATION VIEW DIV }}
